<template>
	<dialog-box id="pay_scheme_set" ref="dialogBox" :param="{title:'方案配置', width:9.3}">
		<div class="form">
			<div class="head_div">
				<span>*</span>
				请选择学员
			</div>
			<div class="stu_div">
				<div class="stu_scroll">
					<div v-for="item in stuList" class="stu">
						{{item.name}}
						<div class="stu_close" @click="deleteStu(item)"></div>
					</div>
				</div>
			</div>
			
			<div class="head_div">
				<span>*</span>
				选择收费项目
				<el-checkbox-group v-model="checkList">
				    <el-checkbox v-for="item in chargeTypeList" :key="item.paymentTypeId" :label="item.paymentTypeId">
				    	{{item.name}}
				    </el-checkbox>
				</el-checkbox-group>
			</div>
			<div>
				<template v-for="scheme in schemeList">
					<div class="scheme" v-show="checkList.indexOf(scheme.paymentTypeId)>=0">
						<div class="sub_title">
							{{scheme.paymentTypeName}}
						</div>
						<div class="row">
							<label class="label">
								<span>*</span>
								收费标准
							</label>
							<el-select v-model="scheme.paymentStandardId" id="paymentTypeId" style="width: 2.5rem;" placeholder="请选择">
							    <el-option v-for="item in standardMap[scheme.paymentTypeId]" :key="item.paymentStandardId"
							      :label="item.name" :value="item.paymentStandardId">
							    </el-option>
						  	</el-select>
						  	&emsp;&emsp;&emsp;
						  	<label class="label">
						  		<span>*</span>
								缴费方式
							</label>
							<el-select v-model="scheme.paymentMode" id="paymentTypeId" style="width: 2.5rem;" placeholder="请选择">
							    <el-option v-for="item in paymentMode" :key="item.value"
							      :label="item.name" :value="item.value">
							    </el-option>
						  	</el-select>
						</div>
						<div class="row">
							<label class="label">
								<span>*</span>
								折扣方法
							</label>
							<el-select v-model="scheme.discountMode" id="paymentTypeId" style="width: 2.5rem;" placeholder="请选择">
							    <el-option label="折扣" value="1">
							    </el-option>
							    <el-option label="单价减" value="2">
							    </el-option>
						  	</el-select>
						  	&nbsp;
						  	<template v-if="scheme.discountMode==1">
								<el-input-number v-model="scheme.discountRatio" id="price" controls-position="right"
								 	:min="0" :max="10" size="small" :precision="precision" style="width: 1.5rem;">
								 </el-input-number>
								 折
							</template>
							<template  v-if="scheme.discountMode==2">
								减
								<el-input-number v-model="scheme.discountMoney" id="price" controls-position="right"
								 	:min="0" :max="999999999" size="small" :precision="precision" style="width: 1.5rem;">
								 </el-input-number>
								 元
							</template>
						</div>
						<div class="row">
							<label class="label">
								<span></span>
								折后价
							</label>
							￥2400.00
							
							&emsp;&emsp;&emsp;
							<label class="label">
								日单价
							</label>
							￥2400.00
						</div>
					</div>
				</template>
			</div>
		</div>
		<div class="btn_div">
			<div class="btn_sure" @click="sure()">确 认</div>
			<div class="btn_cancel" @click="cancel()">取 消</div>
		</div>
	</dialog-box>	
</template>

<script>
var vm,dict;
var param = {
	name : "",
	mark : "",
	campusId : "",
	_wait : ""
}
export default {
	data : function() {
		return {
			param : {},
			isAdd : true,
			checkList : [],
			chargeTypeList : [],
			schemeList : [], //配置方案
			standardMap: {}, //收费标准
			stuList : null,
			precision: 2,
			campusId: null,
		}
	},
	methods : {
		init : function(chargeType, stuList) {
			vm.$refs.dialogBox.open();
			
			vm.isAdd = (chargeType? false : true);
			
			//有传收费类型对象,则是编辑,否则新增
			if(chargeType) {
				vm.param = tool.clone(chargeType);
				vm.param._wait = "";
			} else {
				vm.param = tool.clone(param);
				vm.param.campusId = vm.$store.state.campusId;
			}
			
			vm.stuList = [{name:"张三三"},{name:"李三四"},{name:"王三五"},{name:"张三三"},{name:"李三四"},{name:"王五"},
				{name:"张三三"},{name:"李三四"},{name:"王三五"},{name:"张三三"},{name:"李三四"},{name:"王五"},
			{name:"张三三"},{name:"李三四"},{name:"王三五"},{name:"张三三"},{name:"李三四"},{name:"王五"},
			{name:"张三三"},{name:"李三四"},{name:"王三五"},{name:"张三三"},{name:"李三四"},{name:"王五"},
			{name:"张三三"},{name:"李三四"},{name:"王三五"},{name:"张三三"},{name:"李三四"},{name:"王五"},]
			
			
			let campusId = vm.$store.state.campusId;
			//如果校区id改变,重新加载数据
			if(vm.campusId != campusId) {
				vm.campusId = campusId;
				vm.loadList();
			}
		},
		cancel : function() {
			vm.$refs.dialogBox.close();
		},
		sure : function() {
			return;
			
			//验证规则
			var rules = [{
				judge : /^[0-9a-zA-Z\u4E00-\u9FA5【】（）_-]{1,20}$/.test(vm.param.name),
				focus : $("#pay_scheme_set #name"),
				tips : "请输入1-20位由字母汉字数字【】（）_-组成的名称"
			}];
			
			if(!tool.validate(rules)) {
				return;
			}
			
			if(vm.isAdd) {
				//新增
				api.chargeTypeAdd(vm.param).then(function(data) {
					tool.message({showClose: true, message: "新增收费类型成功", type: 'success'});
					vm.$emit('callback');
				    vm.cancel();
				});
			} else {
				//编辑
				api.chargeTypeEdit(vm.param).then(function(data) {
					tool.message({showClose: true, message: "编辑收费类型成功", type: 'success'});
					vm.$emit('callback');
				    vm.cancel();
				});
			}
			
		},
		deleteStu : function(stu) {
			let index = vm.stuList.indexOf(stu);
			vm.stuList.splice(index, 1);
		},
		loadList : function() {
			let campusId = vm.$store.state.campusId;
			
			vm.schemeList = [];
			//查询所有收费类型
			api.chargeTypeAll({campusId}).then(function(data) {
				vm.chargeTypeList = data.list;
				//拼接成缴费方案
				data.list.forEach(function(item) {
					vm.schemeList.push({
						paymentTypeId: item.paymentTypeId,
						paymentTypeName: item.name,
						paymentStandardId: "",
						paymentMode: "",
						discountMode: "",
						discountMoney: "",
						discountRatio: "",
						totalMoney: "",
						realMoney: "", 
						dailyPrice: "",
						isCheck: true
					})
				})
			})
			
			vm.standardMap = {};
			//查询所有收费标准
			api.chargeStandardAll({campusId}).then(function(data) {
				//根据收费类型进行分类
				data.list.forEach(function(item) {
					let key = item.paymentTypeId;
					vm.standardMap[key] = vm.standardMap[key] || [];
					vm.standardMap[key].push(item);
				});
			})
			
		}
	},
	mounted : function() {
		vm.init();
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict, true);
		vm.paymentMode = dict["payment_mode"];
	}
}
</script>

<style lang="scss">
#pay_scheme_set {
	.el-checkbox-group {
		display: inline-block;
		margin-left: 0.15rem;
	}
	.el-checkbox__label {
		font-size: 0.16rem;
		color: #666666;
	}
	.el-input-number__increase{
		border-radius: 0 0.08rem 0 0 !important;
	}
	.el-input-number__decrease{
		border-radius: 0 0 0.08rem 0 !important;
	}
	.btn_div {
		padding-top: 0.2rem;
	}
}
</style>
<style scoped>
	.form {
		padding: 0 0.3rem;
		font-size: 0.16rem;
		color: #666666;
	}
	
	.head_div {
		line-height: 0.36rem;
	}
	
	.label {
		margin-right: 0.1rem;
	}
	.label>span,.head_div>span {
		color: red;
		display: inline-block;
		position: relative;
		top: 0.02rem;
		width: 0.1rem;
	}
	.row {
		padding: 0.07rem 0 0.07rem 0.1rem;
	}
	
	.stu_div {
		height: 0.82rem;
		margin-top: 0.05rem;
		margin-bottom: 0.15rem;
		padding: 0.08rem 0.08rem 0 0;
		border: 0.01rem solid #cccccc;
		border-radius: 0.06rem;
		overflow: auto;
	}
	.stu_div::-webkit-scrollbar {
		width: 0.04rem;
	}
	.stu_div::-webkit-scrollbar-thumb {
		border-radius: 0.03rem;
    	background: #3885F8;
	}
	.stu_scroll {
		overflow: hidden;
	}
	.stu {
		position: relative;
		padding: 0 0.3rem 0 0.1rem;
		line-height: 0.26rem;
		margin-bottom: 0.08rem;
		margin-left: 0.08rem;
		border: 1px solid #dedede;
		float: left;
		font-size: 0.14rem;
		cursor: pointer;
	}
	.stu_close {
		width: 0.26rem;
		height: 0.26rem;
		position: absolute;
		top: 0;
		right: 0;
		background: url(~@/assets/img/clue_manage/close.png)
					no-repeat center / 0.1rem;
		
	}
	.stu:hover {
		background-color: #eeeeee;
		color: #333333;
	}
	.scheme {
		margin-bottom: 0.1rem;
	}
	.sub_title {
		line-height: 0.36rem;
		background-color: rgba(246, 246, 246);
		padding-left: 0.15rem;
		margin-bottom: 0.08rem;
		font-weight: bold;
		color: #333333;
		vertical-align: bottom;
	}
	
</style>